Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[B5] Add Styleguide for Bootstrap 5 #33718

Closed
wants to merge 67 commits into from
Closed

[B5] Add Styleguide for Bootstrap 5 #33718

wants to merge 67 commits into from

Conversation

biyeun
Copy link
Member

@biyeun biyeun commented Nov 7, 2023

Technical Summary

NOTE: This is a draft PR. As it is a draft, I will force push the branch to this PR as I cherry-pick commits I've made into separate PRs that affect code outside of the styleguide.

This adds a Bootstrap 5 version of our styleguide, accessible at /styleguide/b5/, which also makes several improvements on our current styleguide:

  • organization & navigation improvements — easier to find and get to specific examples of common components used in HQ
  • readability improvements — larger text in the styleguide for reading ease, style updates to <code> blocks
  • ability to view code and running examples side by side (the original styleguide required flipping between two tabs, which isn't great for readability / usability

and there are some pending additions:

  • full coverage of all knockout bindings and knockout components — we had very partial coverage of this in the past
  • migration guide for current bootstrap migrations and a place to store thoughts, best practices, and help for future bootstrap migrations

Lastly, one big purpose I see with the styleguide (and the reason why i'm being diligent with component and knockout binding coverage) is that I see it as an excellent visual test of any front-end library changes, including future bootstrap 5 upgrades. To have all of our components available to test in one place will hopefully make testing front end library upgrades in the future easier and less error-prone.

Safety Assurance

Safety story

A final version of this PR will only be making additions to the styleguide—all other code changes will be cherry-picked out into separate PRs for review.

Automated test coverage

No

QA Plan

Not needed. Styleguide is not a core user workflow and beneficial only to HQ developers. This will live on staging as I continue to make changes.

Rollback instructions

  • This PR can be reverted after deploy with no further considerations

Labels & Review

  • Risk label is set correctly
  • The set of people pinged as reviewers is appropriate for the level of risk of the change

@biyeun biyeun added the product/invisible Change has no end-user visible impact label Nov 7, 2023
@dimagimon dimagimon added the Risk: Medium Change affects files that have been flagged as medium risk. label Nov 14, 2023
@biyeun biyeun force-pushed the bmb/b5-styleguide branch 2 times, most recently from f497637 to 491578e Compare November 16, 2023 20:16
@dimagimon dimagimon removed the Risk: Medium Change affects files that have been flagged as medium risk. label Nov 16, 2023
@dimagimon dimagimon added dependencies Pull requests that update a dependency file Risk: High Change affects files that have been flagged as high risk. labels Nov 21, 2023
@dimagimon dimagimon removed dependencies Pull requests that update a dependency file Risk: High Change affects files that have been flagged as high risk. labels Nov 22, 2023
@biyeun biyeun force-pushed the bmb/b5-styleguide branch 2 times, most recently from 32987e8 to d0a7570 Compare November 27, 2023 15:48
@dimagimon dimagimon added the dependencies Pull requests that update a dependency file label Nov 28, 2023
@biyeun biyeun force-pushed the bmb/b5-styleguide branch 2 times, most recently from 61dabd7 to 827bcab Compare November 30, 2023 22:01
@dimagimon dimagimon removed the dependencies Pull requests that update a dependency file label Nov 30, 2023
@dimagimon dimagimon added Risk: Medium Change affects files that have been flagged as medium risk. dependencies Pull requests that update a dependency file labels Jan 18, 2024
@dimagimon dimagimon removed the Risk: Medium Change affects files that have been flagged as medium risk. label Jan 19, 2024
@biyeun
add styleguide section on tables
8d16b85
@biyeun
add additional styleguide context on colors for design
085caf7
@biyeun
add more context surrounding tables and layout
3761f06
@biyeun
add migration guide
bfe1dc1
@biyeun
update refs to hqwebapp/js/widgets in the styleguide
38be322
@biyeun
update styleguide/base.html to use tempus dominus as main date time p…
ae3f47c 
…icker rather than jquery ui
@biyeun
add dates and times section to styleguide
05381a4
@biyeun
cleanup migration guide text
e70462f
@biyeun
fix code guidelines toc
32963f0
@biyeun
make sure all styleguide pages have use_bootstrap5 decorator
6034b8a
@biyeun
add usage note for datatables
510c610
@biyeun
add link to javascript guide on read the docs
d6303c8
@biyeun
add section on navigation
383b6d1
@biyeun
update code for display widget
2fc29f7
@biyeun
rename to get_python_example_context
44307d3
@biyeun
add utilities for helping to structure necessary template context for…
8081c5f 
… functional views (explained in style guide)
@biyeun
fix url prefix in old styleguide tabs
f35f082
@biyeun
add styleguide section on views
bbc559a
@biyeun
standardize padding around text-only code examples
ec58095
@biyeun
add bootstrap 5 styleguide tabs to tabs/config.py
1dfc1d2
@biyeun
add example of top-level navigation tabs to styleguide page on naviga…
13f7e2b 
…tion
@biyeun
update bootstrap migration guide on suggestions for sharing markdown …
40b02be 
…files and multiple runs of migrate_app_to_bootstrap5
@biyeun
specify app_name a little more to reduce confusion
5f74eda
@biyeun
make this table bold
e7912ce
@biyeun
add deprecation message and link to new styleguide in bootstrap 3 sty…
9c192b3 
…leguide
@biyeun
lint
8d3e342
@biyeun
update icons in styleguide to match new icons from fontawesome 6
558d24c
@biyeun biyeun closed this Feb 29, 2024
@biyeun biyeun deleted the bmb/b5-styleguide branch March 4, 2024 14:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dannyroberts dannyroberts Awaiting requested review from dannyroberts

@millerdev millerdev Awaiting requested review from millerdev

@mjriley mjriley Awaiting requested review from mjriley

@AmitPhulera AmitPhulera Awaiting requested review from AmitPhulera

@gherceg gherceg Awaiting requested review from gherceg

@jingcheng16 jingcheng16 Awaiting requested review from jingcheng16

@orangejenny orangejenny Awaiting requested review from orangejenny orangejenny will be requested when the pull request is marked ready for review orangejenny is a code owner

Assignees
No one assigned
Labels
product/invisible Change has no end-user visible impact
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@biyeun @orangejenny @esoergel @dimagimon